<template>
    <div class="tourist_flow">
        <div class="common_header">
            <div class="header-img"><img src="../assets/imgs/nav_bar_return@2x.png" alt="" @click="$router.go(-1)">
            </div>
            <div class="header-title">大数据分析报告</div>
            <div class="custom-tabs">
                <div class="custom-tab-item" :class="{active:active == 'quarter'}" @click="active = 'quarter'">季度</div>
                <div class="custom-tab-item" :class="{active:active == 'half_year'}" @click="active = 'half_year'">半年
                </div>
                <div class="custom-tab-item" :class="{active:active == 'year'}" @click="active = 'year'">年度</div>
            </div>
        </div>
        <div class="content" v-if="active == 'quarter'">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    :loading-text="loadText"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div class="content_pian" v-for="item in contentList" :key="item.id" @click="turnTo(item)">
                    <div class="content-name">{{item.filename}}</div>
                    <div class="content-des">
                        <span>{{item.created_at.slice(0,10)}}</span>
                        <span>
                            <span @click.stop="showLoad(item)"><img src="../assets/imgs/report_page_download@2x.png" alt="" class="img"></span>
                            <span @click.stop="showShare(item)"><img src="../assets/imgs/report_page_share@2x.png" alt="" class="img1"></span>
                        </span>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="content" v-if="active == 'half_year'">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    :loading-text="loadText"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div class="content_pian" v-for="item in contentList" :key="item.id" @click="turnTo(item)">
                    <div class="content-name">{{item.filename}}</div>
                    <div class="content-des">
                        <div>{{item.created_at.slice(0,10)}}</div>
                        <div>
                            <span @click.stop="showLoad(item)"><img src="../assets/imgs/report_page_download@2x.png" alt="" class="img"></span>
                            <span @click.stop="showShare(item)"><img src="../assets/imgs/report_page_share@2x.png" alt="" class="img1"></span>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <div class="content" v-if="active == 'year'" >
            <van-list
                    v-model="loading"
                    :finished="finished"
                    :loading-text="loadText"
                    finished-text="没有更多了"
                    @load="onLoad">
                <div class="content_pian" v-for="item in contentList" :key="item.id" @click="turnTo(item)">
                    <div class="content-name">{{item.filename}}</div>
                    <div class="content-des">
                        <div>{{item.created_at.slice(0,10)}}</div>
                        <div>
                            <span @click.stop="showLoad(item)"><img src="../assets/imgs/report_page_download@2x.png" alt="" class="img"></span>
                            <span @click.stop="showShare(item)"><img src="../assets/imgs/report_page_share@2x.png" alt="" class="img1"></span>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <van-actionsheet
                v-model="show"
                :actions="actions"
                @select="onSelect"
        />
        <van-actionsheet
                v-model="showShares">
            <div class="sheet">
                <div class="sheet-list">
                    <!--<span class="sheet-title" @click="shareHaoYou">-->
                    <span class="sheet-title" @click="shareFirend">
                        <img src="../assets/imgs/report_page_wechat@2x.png"  class="sheet-img" alt="">
                        <span>微信好友</span>
                    </span>
                    <!--<span class="sheet-title" @click="shareManyPeople">-->
                    <span class="sheet-title" @click="shareFirendQuan">
                        <img src="../assets/imgs/report_page_friends@2x.png"  class="sheet-img" alt="">
                        <span>朋友圈</span>
                    </span>

                </div>
                <div class="cancel" @click="showShares=false">取消</div>
            </div>
        </van-actionsheet>
    </div>
</template>
<script>
    import {Notify, Loading, List,Actionsheet,Toast } from 'vant';
    // const Base64 = require('js-base64').Base64;
    // import wx from 'weixin-js-sdk';
    var wx = api.require('wx');
    // import '../api.js';
    // import {commonShare,shareTitle,shareUrl,shareImg,shareDesc,} from '../assets/lib/share'
    export default {
        name: "index",
        components: {
            [Notify.name]: Notify,
            [Toast.name]: Toast,
            [Actionsheet.name]: Actionsheet,
            [List.name]: List,
            [Loading.name]: Loading
        },
        data() {
            return {
                show: false,
                showShares: false,
                path:'',
                imgUrl:'',  // 大图链接
                title:'',  // 名字
                thumbnail:'',  // 缩略图
                filename:'',
                actions: [
                    {
                        name: '下载pdf到本地',
                        type: 'download'
                    },
                    {
                        name: '取消',
                        type: 'cancel'
                    }
                ],
                active: 'quarter',
                contentList: [],
                pageSize: 8,
                page: 0,
                list: [],
                loading: false,
                finished: false,
                loadText: '加载中…',
                searchStr: '',
                http: 'http://c.yueshengkj.com/api/',
                type: 'quarter'  //quarter/half_year/year
            };
        },
        watch: {
            active: function (val) {
                this.page = 0;
                this.type = val;
                this.contentList = [];
                this.loading = true;
                this.finished = false;
                this.loadText = '加载中…';
                if(this.loading){
                    this.onLoad();
                }
            }
        },
        mounted() {
            this.tr_id = localStorage.getItem('tr_id');
        },
        methods: {
            shareFirend() {
                let self = this;
                wx.isInstalled(function (ret, err) {
                    if (ret.installed) {
                        wx.shareWebpage({
                            // apiKey: 'wx504b83edf8bec631',
                            apiKey: 'wx1724ed003e290b12',
                            scene: 'session',
                            title: self.filename,
                            // description: '岳圣科技分享图',
                            thumb: 'widget://image/logo.png', // 不知道为什么这里使用fs:// 死活都有问题，无法分享
                            contentUrl: self.path
                        }, function (ret, err) {
                            if (ret.status) {
                                api.toast({
                                    msg:"分享成功！"
                                });
                            } else {
                                api.toast({
                                    msg: err.code
                                });
                            }
                        });
                    } else {
                            alert('当前设备未安装微信客户端');
                        }
                    });
                        // let timestamp = new Date().getTime();
                        // api.download({
                        //     url: self.imgUrl, // 图片地址
                        //     savePath: 'fs://test'+timestamp+'.jpg', // 图片存储路径
                        //     report: true,
                        //     cache: true,
                        //     allowResume: true
                        // }, function (res, err) {
                        //     if (res.state == 1) {
                        //         Toast('下载成功');
                        //         wx.shareImage({
                        //             apiKey: 'wx504b83edf8bec631',
                        //             scene: 'session',
                        //             // thumb: 'widget://test'+timestamp+'.jpg', // 不知道为什么这里使用fs:// 死活都有问题，无法分享
                        //             thumb: 'widget://image/logo.png', // 不知道为什么这里使用fs:// 死活都有问题，无法分享
                        //             contentUrl: 'fs://test'+timestamp+'.jpg'
                        //         }, function (rets, err) {
                        //             if (rets.status) {
                        //                 Toast('分享成功')
                        //             } else {
                        //                 Toast(err.code)
                        //             }
                        //         })
                        //     }
                        // })
                    // } else {
                    //     alert('当前设备未安装微信客户端');
                    // }
                // });
            },
            shareFirendQuan() {
                let self = this;
                wx.isInstalled(function (ret, err) {
                    if (ret.installed) {
                        wx.shareWebpage({
                            // apiKey: 'wx504b83edf8bec631',
                            apiKey: 'wx1724ed003e290b12',
                            scene: 'timeline',
                            title: self.filename,
                            // description: '岳圣科技分享图',
                            thumb: 'widget://image/logo.png', // 不知道为什么这里使用fs:// 死活都有问题，无法分享
                            contentUrl: self.imgUrl
                        }, function(ret, err) {
                            if (ret.status) {
                                api.toast({
                                    msg:"分享成功！"
                                });
                            } else {
                                api.toast({
                                    msg: err.code
                                });
                            }
                        });

                    } else {
                        alert('当前设备未安装微信客户端');
                    }
                });
                        // let timestamp = new Date().getTime()
                        // api.download({
                        //     url: self.imgUrl, // 图片地址
                        //     savePath: 'fs://test'+timestamp+'.jpg', // 图片存储路径
                        //     report: true,
                        //     cache: true,
                        //     allowResume: true
                        // }, function (res, err) {
                        //     if (res.state == 1) {
                        //         Toast('下载成功');
                        //         wx.shareImage({
                        //             apiKey: 'wx2ade05388652ed08',
                        //             scene: 'timeline',
                        //             // thumb: 'widget://teste'+timestamp+'.jpg',
                        //             thumb: 'widget://res/logo.png', // 不知道为什么这里使用fs:// 死活都有问题，无法分享
                        //             contentUrl: 'fs://teste'+timestamp+'.jpg'
                        //         }, function (rets, err) {
                        //             if (rets.status) {
                        //                 Toast('分享成功');
                        //             } else {
                        //                 Toast(err.code);
                        //             }
                        //         });
                        //     }
                        // })
                    // } else {
                    //     alert('当前设备未安装微信客户端');
                    // }
                // });
            },
            shareManyPeople() {
                let _this = this;
                wx.ready(function () {
                    //朋友圈
                    wx.onMenuShareTimeline({
                        title: _this.filename, // 分享标题
                        link: _this.path, // 分享链接
                        imgUrl: 'http://pic15.nipic.com/20110813/1993003_205156492136_2.jpg',
                        success: function (res) {
                            Toast('已分享');
                        },
                        cancel: function (res) {
                            Toast('已取消');
                        },
                        fail: function (res) {
                            Toast(JSON.stringify(res));
                        }
                    });
                })
            },
            shareHaoYou(){
                let _this = this;
                wx.ready(function () {
                    //朋友
                    wx.onMenuShareAppMessage({
                        title: _this.filename, // 分享标题
                        desc: '好看的pdf', // 分享描述
                        link: _this.path, // 分享链接
                        imgUrl: 'http://pic15.nipic.com/20110813/1993003_205156492136_2.jpg', // 分享图标
                        type: '', // 分享类型,music、video或link，不填默认为link
                        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                        success: function () {
                            Toast("分享成功");
                        },
                        cancel: function () {
                            Toast("取消分享");
                        }
                    });
                });
            },
            turnTo(val){
                this.$router.push({name:'pdfDetail', query: {url: val.path,filename: val.filename, imgUrl: val.photos.photo,id: val.id}})
            },
            showLoad(val) {
                this.show = true;
                this.path = val.path;
                this.filename = val.filename;

            },
            showShare(val) {
                this.showShares = true;
                this.path = val.path;
                this.filename = val.filename;
                this.imgUrl = val.photos.photo;
                // this.thumbnail = val.photos.thumbnail;
            },
            onSelect(item) {
                // 点击选项时默认不会关闭菜单，可以手动关闭
                if (item.type == 'download') {
                    // console.info('this.pdfUrl',this.path);
                    window.location.href = this.path;
                } else if (item.type == 'cancel') {
                    this.show = false;
                }
            },
            onLoad() {
                setTimeout(() => {
                    this.page++;
                    this.$http.get('auth/pdfFile', {
                        params: {
                            pageSize: this.pageSize,
                            page: this.page,
                            type: this.type,
                            tr_id: this.tr_id
                        }
                    })
                        .then((result) => {
                            if (result.status_code === 200) {
                                let re = result.data.data;
                                if (re.length !== 0) {
                                    this.contentList = this.contentList.concat(re);
                                }
                                // 加载状态结束
                                this.loading = false;
                                // 数据全部加载完成
                                if (this.contentList.length >= result.data.total) {
                                    this.finished = true;
                                    this.loadText = "加载完成";
                                }
                            } else {
                                this.finished = true;
                            }
                        })
                        .catch((err) => {
                            Notify({
                                message: err.data.msg || "数据异常，请重试",
                                duration: 1000,
                                background: '#ff0000'
                            })
                        })
                }, 500);

            }
        }
    };
</script>

<style scoped lang="less">
    .custom-tabs {
        /*height: 55px;*/
        padding: 0 20px;
        border-bottom: 0.5px solid #f6f6f6;
    }

    .custom-tab-item {
        display: inline-block;
        line-height: 0.44rem;
        height: 0.44rem;
        margin-right: 0.3rem;
        color: rgba(40, 44, 52, 1);
        cursor: pointer;
    }

    .custom-tab-item.active {
        font-weight: 700;
        color: rgba(40, 44, 52, 1);
        border-bottom: 2px solid #4588d4;
    }

    .custom-tab-content {
        padding-top: 60px;
        height: 100%;
        /* position: relative; */
    }
</style>
<style scoped lang="less">
    .tourist_flow {
        padding: 1.6rem 0 0.34rem;
    }
.sheet{
    .cancel{
        text-align: center;
        color:rgba(40,44,52,1);
        font-size: 0.14rem;
        line-height: 60px;
        border-top: 1px solid rgba(0,0,0,0.03);
    }
    .sheet-list{
        padding-left: 0.04rem;
        padding-bottom: 0.1rem;
        display: flex;
        .sheet-title{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sheet-img{
            width: 0.44rem;
            margin: 0.14rem 0.14rem 0.06rem;
        }
    }

}
    .content_pian {
        width: 3.43rem;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rem 0.08rem 0.4rem 0rem rgba(119, 136, 175, 0.2);
        border-radius: 0.08rem;
        margin: 0.2rem auto 0;
        padding: 0.16rem;
        .content-name {
            overflow: hidden;
            text-overflow: ellipsis; //超出部分以省略号显示
            white-space: nowrap;
            font-weight: bold;
            color: rgba(40, 44, 52, 1);
            font-size: 0.18rem;
            padding-bottom: 0.15rem;
        }
        .content-des {
            display: flex;
            justify-content: space-between;
            color: rgba(172, 178, 199, 1);
            font-size: 0.12rem;
            line-height: 0.16rem;
            .img {
                width: 0.14rem;
                vertical-align: middle;
            }
            .img1 {
                margin-left: 0.2rem;
                width: 0.14rem;
                vertical-align: middle;
            }
        }
    }
</style>


